/*微金所样式表*/
/*定义变量*/
@baseColor:#e92322;
/*头部样式*/
.wjs_header {
  height:50px;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  .row {
    height:100%;
    text-align: center;
    >div:nth-of-type(-n+3){
      border-right:1px solid #ccc;
      >.wjs_code{
        display: block;
        position: relative;
        >img {
          display: none;
          position: absolute;
          z-index: 99999;
          top:49px;
          left:50%;
          transform:translateX(-50%);
        }
        &:hover{
          >img {
            display: block;
          }
        }
      }
    }
    >div:last-of-type{
      > .btn-danger {
        background-color: @baseColor;
        border-color: @baseColor;
      }
      > .btn {
        padding:3px 15px;
      }
      > .btn-link{
        color:#333;
        &:hover {
          text-decoration : none;
        }
      }
    }
  }
}
.wjs_nav {
  &.navbar{
    margin-bottom: 0;
  }
  .navbar-brand {
    height:80px;
    line-height: 50px;
    >.wjs_icon{
      font-size: 40px;
    }
    > .wjs_icon_logo{
      color:@baseColor;
    }
    > .wjs_icon_text{
      color:#333;
    }
  }
  .navbar-nav{
    >li{
      >a {
        font-size: 16px;
        line-height: 50px;
      }
      > a:hover , a:focus{
        color:#777;
        border-bottom: 2px solid @baseColor;
      }
      &.active{
        >a,a:hover,a:focus {
          border-bottom: 2px solid @baseColor;
          background-color: transparent;
        }
      }
    }

  }
  .navbar-toggle{
    margin-top:23px;
  }
}
.wjs_banner {
  .mobelimgBox{
    width:100%;
    display: block;
    >img {
      width:100%;
      display: block;
    }
  }
  .pcImg{
    width:100%;
    height: 410px;
    display: block;
    background-position: center center;
    background-size: cover;
  }
}
.wjs_info{
  border-bottom: 1px solid #ccc;
  padding:30px;
  .wjs_icon{
    font-size:20px;
  }
  .row {
    >div {
      margin-top: 15px;
      >a:hover{
        color:@baseColor;
      }
    }
  }
}
.wjs_reverse{
  height:60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  .wjs_icon{
    font-size: 18px;
  }
  .reverse_now{
    color:@baseColor;
    border-bottom:1px dashed @baseColor;
  }
  .row{
    a:hover{
      color: @baseColor;
    }
  }
}
.wjs_product {
  .wrapper{
    width:100%;
    overflow: hidden;
  }
  clear: both;
  padding:15px;
  background-color: #eee;
  .nav-tabs{
    border-bottom: 1px solid #ccc;
    >li{
      margin-bottom: 0;
      padding:0 12px;
      >a{
        line-height: 50px;
        border-radius: 0;
        border: none;
        background-color: transparent;
      }
      > a:hover{
        border-bottom: 3px solid @baseColor;
      }
      &.active {
        //border-bottom: 3px solid @baseColor;
        >a,a:hover,a:focus{
          border:none;
          border-radius: 0;
          background-color: transparent;
          border-bottom: 3px solid @baseColor;
        }
      }
    }
  }
  .wjs_pBox {
    height:150px;
    margin-top:20px;
    background-color: #fff;
    position: relative;
    .wjs_pLeft{
      margin-right:70px;
      height:150px;
      padding-top:10px;
      padding-right:10px;
      font-size: 12px;
      >p{
        width:100%;
        text-align: center;
        font-size: 16px;
      }
      .row{
        padding: 0 5px;
        >div:nth-of-type(even){
          text-align: right;
        }
      }
    }
    .wjs_pRight{
      height:150px;
      width:80px;
      text-align: center;
      position: absolute;
      right: 0;
      top:0;
      border-left: 1px dashed #ccc;
      padding-top:30px;
      > b {
        font-size :40px;
        color:red;
      }
      > sub {
        color:red;
        position: absolute;
        bottom:80px;
      }
      &::before, &::after{
        content:"";
        width:10px;
        height: 10px;
        position: absolute;
        left:-5px;
        background-color: #eee;
        border-radius:50%;
      }
      &::before{
        top:-5px;
      }
      &::after{
        bottom:-5px;
      }
      > .wjs_tip{
        position:absolute;
        top:20px;
        width:100%;
        left: 50%;
        font-size: 12px;
        transform:translateX(-50%);
        > span {
          cursor:pointer;
        }
        > span:first-of-type{
          border:1px solid red;
          color:red;
        }
        > span:last-of-type{
          border:1px solid blue;
          color:blue;
        }
      }
    }
    &.active {
      background-color: red;
      > .wjs_pLeft{
        color:#fff;
      }
      > .wjs_pRight{
        > b,sub,p{
          color:#fff;
        }
        > .wjs_tip{
          >span{
            color:#fff;
            border:1px solid #fff;
          }
        }
      }
    }
  }
}
.wjs_news{
  .wjs_newsTitle{
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    &::after{
      content:"";
      width:10px;
      height:10px;
      position: absolute;
      right:-5px;
      bottom: -5px;
      border:1px solid #ccc;
      background-color: #fff;
      border-radius: 50%;
    }
  }
  .wjs_news_tip{
    >.nav{
      &.nav-tabs{
        position: relative;
        >.newsLine{
          position: absolute;
          left:30px;
          top:40px;
          height: 300px;
          width:1px;
          border-left: 1px dashed @baseColor;
          z-index: -1111;
        }
        //width:40px;
        border:none;
        .wjs_icon{
          font-size:30px;
          color:#ccc;
        }
        >li{
          margin-top:30px;
          background-color: #fff;
          >a,a:hover,a:focus{
            border-radius: 50%;
            width:60px;
            height:60px;
            display: block;
            border:none;
            border:1px solid #ccc;
          }
          &.active{
            >a,a:hover,a:focus{
              width:60px;
              height:60px;
              display: block;
              border:none;
              background-color: @baseColor;
              border-radius: 50%;
              .wjs_icon{
                font-size:30px;
                color:#fff;
              }
            }
          }
          > a:hover{
            .wjs_icon{
              font-size:30px;
              color:#fff;
            }
            border-radius: 50%;
            background-color: @baseColor;
          }
        }
      }
    }
  }
  .wjs_newslist{
    >li {
      margin-top:30px;
      list-style: none;
      line-height: 50px;
    }
  }
  @media screen and (min-width:768px) and (max-width:992px){
    .nav-tabs{
      width:100%;
      > li{
        float: left;
        margin: 0px 50px;
      }
    }
  }

  @media screen and (max-width:768px){
    .nav-tabs{
      width:100%;
      > li{
        margin: 20px 0px;
        width: 25%;
      }
    }
  }
}
.wjs_partner{
  background-color: #eee;
  h3{
    margin-top:30px;
    text-align: center;
  }
  ul{
    width:100%;
    margin: 0 auto;
    overflow: hidden;
    //text-align: center;
    li{
      list-style: none;
      float: left;
      margin: 20px;
      >span {
        font-size: 70px;
      }
    }
  }
}